Vue-cli4打包踩坑

最近在做一个vue项目，后台还没有开始，只是根据提供的原型ui把前台静态页面设计出来，也是本人第一次做，开始做的时候用的是cli-4.x版本，给我的感觉，简化了很多，目录结构很简洁。然而在打包准备上线测试的时候遇到了很多问题，以此记录下来，希望我的文章能够帮到有需要的童鞋。大神轻喷。

一、初始打包

命令npm run build

• 默认编译后直接在根目录生成dist文件夹

在没有编写vue.config.js的情况下，生成的目录结构如下

可以看到静态文件直接位于dist文件夹下，这与我项目中的静态资源路径不一致（我的是放在assets下），所以我们需要编写vue.config.js

二、vue.config.js配置

• 官方cli配置详解：配置参考
• 开发的时候，我只在里面添加了别名（目前项目用的还不多，后边避免静态资源路径出错，干脆去掉了
• 如果觉得官方配置看的麻烦，我给大家推荐一篇别的博主写的，可以按需引入vue.config.js详细配置注释
• 我的vue.config.js

module.exports = {
  // 公共路径(必须有的)
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // 静态资源存放的文件夹(相对于ouputDir)
  assetsDir: "assets",
  // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装)
  lintOnSave:false,
  // 我用的only，打包后小些
  compiler: false,
  productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建
  // css相关配置(我暂时没用到)
  // css: {
  // 是否使用css分离插件 ExtractTextPlugin
  // extract: true,
  // 开启 CSS source maps?
  // sourceMap: false,
  // css预设器配置项
  // loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  // modules: false
  // },
  // webpack-dev-server 相关配置
  devServer: {
    open: true,  // npm run serve后自动打开页面
    host: '0.0.0.0',  // 匹配本机IP地址(默认是0.0.0.0)
    port: 8080, // 开发服务器运行端口号
    proxy: null,
    // 注：目前本项目暂时没有写后台接口，没有跨域问题，暂时不配置proxy
  },
}
// 差不多就这些的，其余的大家可以查看官方文档，链接上边给出了

• 除了以上这些，我们最好还要将router下的index.js中的mode设置成hash，不要设置成history

三、再次打包

配置完，直接执行npm run build
我们看到这次的dist目录

我们也看到了我的静态资源存放在assets里面
我们打开index.html并访问就能在浏览器访问到自己项目的页面了

后边有阿里云服务器用nginx部署该项目的过程

nginx部署vue项目