Vue项目webpack打包部署到服务器的实例详解
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。 必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run build,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist,里面有一个static文件夹和index.html,然后我就将dist目录下的文件拷贝到Tomcat服务器下,会发现访问到的是一个空白页面,但是当我把它放在..webappsROOT目录下,它就可以访问了 Tomcat下面的目录结构: 但是这肯定是不行的,然后我就开始寻找答案,也根据别人的一些步骤做了下来,后来发现还是有一些问题的,没有办法访问到主页面,虽然吧,一直都没成功,但是我也没放弃,然后就综合了一下问答里面别人说的,进行了几次尝试,最后成功了。(给大家一个小建议:别放弃就好)。 下面的就是我的config/index.js的配置: module.exports = {
build: { env: require('./prod.env'),index: path.resolve(dirname,'../dist/index.html'),assetsRoot: path.resolve(dirname,'../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: true,// Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to true ,make sure to:// npm install --save-dev compression-webpack-plugin productionGzip: false,productionGzipExtensions: ['js','css'],// Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // npm run build --report // Set to true or false to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report },dev: { env: require('./dev.env'),port: 8080,autoOpenBrowser: true,proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy" // with this option,according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience,they generally work as expected,// just be aware of this issue when enabling this option. cssSourceMap: false } } 可以发现,我就改了两处,就是assetsPublicPath所对应的值,我这里用的是./,我也用webapps下的命的项目名试过,只是没得到我想要的结果,后来我还是改成了./ 使用vue-router的情况当你在项目中使用vue-router的时候,就需要给src/router/index.js添点东西,如下面: 然后执行npm run dev,将打包后的文件放在Tomcat的目录下的WebApps下的ttms中,然后,就可以访问到了:http://localhost:8080/ttms/ 以上就是关于Vue项目webpack打包部署到服务器的实例详解的资料,关于Vue的开发文章本站还很多,希望大家搜索参阅,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |