Vue Project Webpack package deployment to server

Vue Project Webpack Package deployment to the server must be configured/config/index.js

Under the template of Vue-cli Webpack /config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库") , we can see assetsPublicPath this key, and this thing also appeared two times, when I first packaged, just modified the bottom assetsPublicPath , it changed from ‘/‘ ./ , then I executed npm run build , After the package is successful, you can see that there will be more folders in the project, that is, there is a folder in it, and dist static index.html then I will dist copy the files under the directory to the Tomcat server, I will find a blank page, but when I put it in ..\webapps\ROOTdirectory, it will have access to the

Tomcat the following directory structure:

But this certainly is not, and then I began to look for answers, but also according to other people's steps to do down, later found that there are some problems, there is no way to access the main page, although it has not been successful, but I did not give up, and then a comprehensive answer to what others said, made several attempts, and finally succeeded. (Give everyone a little advice: don't give up just fine).

The following is my config/index.js configuration:

See Http://vuejs-templates.github.io/webpack for documentation.var path =Require' Path ')Module.exports = {Build: {Env:Require'./prod.env '),Index:path.resolve (__dirname,‘.. /dist/index.html '),AssetsRoot:path.resolve (__dirname,‘.. /dist '),Assetssubdirectory:' Static ',Assetspublicpath:‘./‘,Productionsourcemap:TrueGzip off by default as many popular static hosts such asSurge or netlify already gzip all static assets for you.Before setting to ' true ', make sure to:NPM Install--save-dev compression-webpack-plugin productiongzip:FalseProductiongzipextensions: [' JS ',' CSS '],Run the build command with a extra argument toView The Bundle Analyzer report after build finishes:' NPM Run Build--report 'Set to ' true ' or ' false ' to always turn it on or off BundleAnalyzerReport:process.env.npm_config_report},Dev: {Env:require ( "/dev.env"), port: 8080, autoopenbrowser: true, assetssubdirectory:  ' static ', assetspublicpath: Span class= "hljs-string" "./', proxytable: {}, //CSS sourcemaps Off by default because relative paths is "buggy" //with this option, according to the Css-loa Der README //(https://github.com/webpack/css-loader#sourcemaps) //in we experience, they generally work as expected, //just is AW is of this issue when enabling this option. Csssourcemap: false}           

Can find, I changed two places, is the corresponding value of Assetspublicpath, I use here ./ , I also use WebApps under the name of the project, but did not get the results I want, then I changed to./

Case of using Vue-router

When you use vue-router the project, you need to src/router/index.js add something, like this:

export default new Router({  mode : ‘history‘, base: ‘/ttms/‘, //添加的地方 ... }

Then execute npm run dev , put the packaged file in the Tomcat directory under WebApps under the TTMS, then you can access the: http://localhost:8080/ttms/

Vue Project Webpack package deployment to server