大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么将Vue项目利用webpack打包部署到服务器?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
公司主营业务:网站制作、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出樊城免费做网站回馈大家。
必须要配置的就是/config/index.js
在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run build,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist,里面有一个static文件夹和index.html,然后我就将dist目录下的文件拷贝到Tomcat服务器下,会发现访问到的是一个空白页面,但是当我把它放在..\webapps\ROOT目录下,它就可以访问了
Tomcat下面的目录结构:
但是这肯定是不行的,然后我就开始寻找答案,也根据别人的一些步骤做了下来,后来发现还是有一些问题的,没有办法访问到主页面,虽然吧,一直都没成功,但是我也没放弃,然后就综合了一下问答里面别人说的,进行了几次尝试,最后成功了。(给大家一个小建议:别放弃就好)。
下面的就是我的config/index.js的配置:
// 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: 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 off bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: './', 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添点东西,如下面:
export default new Router({ mode : 'history', base: '/ttms/', //添加的地方 ... }
然后执行npm run dev,将打包后的文件放在Tomcat的目录下的WebApps下的ttms中,然后,就可以访问到了:http://localhost:8080/ttms/
看完上述内容,你们掌握怎么将Vue项目利用webpack打包部署到服务器的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!