Vue打包上线需要注意的问题

vue打包说明

1、关于页面空白的问题

项目已经放在服务器上了，访问页面出现空白，首先打开控制台查看 会发现有报错
，那么是什么导致的呢？！index.html引用的css、js文件找不到。根据目录结构进行修改index.html 引用文件的路径就可以了。

比如

防止在nginx/html/manage  目录下

那么在index.html   中的引用文件src="/manage/static/……".
这样就解决了空白页面的问题。(可打包完成后手动修改)

vue的打包命令为

npm run build

修改config/index.js

build:{
    assetsPublicPath: '/xxx/',
}

在服务器中项目名  替换xxx 进行打包

2、样式错误问题修改

样式错误问题修改 build/webpack.prod.conf.js文件，针对部分样式错误检查之后没有冲突问题。
一定首先检查是否是 样式冲突错乱，改变父容器的属性解决

new OptimizeCSSPlugin({
     /* cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }*/
      cssProcessorOptions: {
        safe: true
      }
    }),

3.去掉锚点问题:(正式环境)

路由index.js设置

model:'history',

相对应服务器配置
nginx配置

/config/nginx.conf文件
location /didi/ {
    try_files $uri $uri/ /didi;
}

配置之后解决访问404的问题.

apache配置

<IfModule mod_rewrite.c>

 RewriteEngine On

 RewriteBase /

 RewriteRule ^index\.html$ - [L]

 RewriteCond %{REQUEST_FILENAME} !-f

 RewriteCond %{REQUEST_FILENAME} !-d

 RewriteRule . /index.html [L]

</IfModule>