必须要配置的就是 / config/index.js
/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript 知识库")
, 我们可以看到 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/
来源: http://www.bubuko.com/infodetail-2613815.html