vue-cli生产环境部署

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 867 | 阅读时长 ≈ 1 分钟

站点根目录部署

  1. 执行npm run build
  2. 找到dist目录，把里面的文件直接丢到站点根目录下即可

站点子目录部署

  1. 修改config/index.js
1
2
3
4
5
6
7
8
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 修改这里，防止报404错误
    productionSourceMap: true
  1. 如果CSS中引用了背景图片，则还要修改build/utils.js中的ExtractTextPlugin 插件设置
1
2
3
4
5
6
7
8
9
if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  1. 如果使用了vue-router,，修改routes。在routes最后增加一条
1
2
3
{
  path: '/test', redirect: '/' //test为所放置的文件夹名称，不修改的话可能会无法显示页面
}

  1. 执行npm run build

  2. 找到dist目录，把里面的文件直接丢到文件夹下即可