{"id":1555,"date":"2018-03-01T12:41:49","date_gmt":"2018-03-01T11:41:49","guid":{"rendered":"http:\/\/www.matjazev.net\/blog\/?p=1555"},"modified":"2018-03-01T21:08:32","modified_gmt":"2018-03-01T20:08:32","slug":"using-vue-spa-created-with-webpack-in-subfolder","status":"publish","type":"post","link":"https:\/\/www.matjazev.net\/blog\/2018\/03\/01\/using-vue-spa-created-with-webpack-in-subfolder\/","title":{"rendered":"Using Vue SPA (created with webpack) in subfolder"},"content":{"rendered":"

There is a common use case where Vue SPA will run in some subfolder in production environment.<\/strong><\/p>\n

When you develop Vue app using Vue-cli all your links are targeting root folder. There are some topics on Vue forums about that problem but there are not complete, so here is a solution that works. I am not saying that it is the best or. only possible, but it works!<\/p>\n

Solution:<\/strong><\/p>\n

I am using two index.html files. One for development (index.html<\/strong>) and the other for production (index_prod.html<\/strong>). Files are 95% the same, except some minor changes in index_prod.html. So, if this is basic index.html<\/p>\n

\n
\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;metacharset="utf-8"&gt;\n    &lt;metaname="viewport" content="width=device-width,initial-scale=1.0"&gt;\n  &lt;\/head&gt;\n\n  &lt;body&gt;\n    &lt;div id="app"&gt;&lt;\/div&gt;\n    &lt;!-- built files will be auto injected --&gt;\n    &lt;script src="\/static\/config.js"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/pre>\n<\/div>\n
For production you must use base tag<\/strong> and change src link<\/strong> (if you need one!<\/em>)<\/p>\n
\n
\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    <strong>&lt;basehref="\/sub-folder\/" \/&gt;<\/strong>\n    &lt;metacharset="utf-8"&gt;\n    &lt;metaname="viewport" content="width=device-width,initial-scale=1.0"&gt;\n  &lt;\/head&gt;\n  \n  &lt;body&gt;\n    &lt;div id="app"&gt;&lt;\/div&gt;\n    &lt;!-- built files will be auto injected --&gt;\n    &lt;script src="<strong>\/sub-folder<\/strong>\/static\/config.js"&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/pre>\n<\/div>\n
Because I am using index_prod for production I must inform webpack about that. So, I need to change webpack.prod.config.js<\/strong>, by adding template property<\/strong> to HtmlWebpackPlugin<\/strong>:<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
newHtmlWebpackPlugin({<\/span><\/div>\n
\n
\n
\u00a0 filename: config.build.index,\n<strong>\u00a0 template: 'index_prod.html',<\/strong>\n\u00a0 inject: true,\n\u00a0 ...\n\n<\/pre>\n<\/div>\n<\/div>\n
Next, I must inform webpack to use new public path, so I must again change webpack.prod.config.js<\/strong>, by adding publicPath property<\/strong> to webpackConfig.output<\/strong>:<\/div>\n
\n
\noutput: {\n  path: config.build.assetsRoot,\n<strong>  publicPath: '\/sub-folder\/',<\/strong>\n  filename:utils.assetsPath('js\/[name].[chunkhash].js'),\n  chunkFilename:utils.assetsPath('js\/[id].[chunkhash].js')\n},\n\n<\/pre>\n<\/div>\n
Then I must inform router to use new public path, so I must add base property to router object<\/strong><\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
let router = new Router({<\/span><\/div>\n
\n
\u00a0 routes: […]<\/div>\n
\u00a0 base: ‘\/sub-folder\/’,<\/strong><\/div>\n
\u00a0 mode: ‘history’<\/div>\n
})<\/div>\n
<\/div>\n
And that’s it! Now I can copy DIST folder to \/sub-folder\/ on production.<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
There is a common use case where Vue SPA will run in some subfolder in production environment. When you develop Vue app using Vue-cli all your links are targeting root folder. There are some topics on Vue forums about that problem but there are not complete, so here is a solution that works. I am … Continue reading Using Vue SPA (created with webpack) in subfolder<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[71,72],"_links":{"self":[{"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/posts\/1555"}],"collection":[{"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/comments?post=1555"}],"version-history":[{"count":7,"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/posts\/1555\/revisions"}],"predecessor-version":[{"id":1562,"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/posts\/1555\/revisions\/1562"}],"wp:attachment":[{"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/media?parent=1555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/categories?post=1555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matjazev.net\/blog\/wp-json\/wp\/v2\/tags?post=1555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}