最近在做一个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部署该项目的过程