vuejs遇到的问题

1、build production之后放到后端webapp/static下，访问不到，如下：

原因：后端在本地部署，然后后端的tomcat没有设置路径名，即http://localhost:8080/

     而publicPath: process.env.NODE_ENV === "production" ? "/standards/static/" : "/",

     导致访问http://localhost:8080/#/login时，出现上面的错误。build打包之后，生成的文件在index.html  中的路径都带了/standards/static/app.1582286509126.js，

修改tomcat路径standards，因为线上的域名也都有该路径，所以不动publicPath的配置。

vuejs代码嵌入到server端都属于production环境，单独的启动才是development环境，production环境应该再细分为qa环境、预发环境、正式环境。

如果将vuejs代码嵌入到server端，就需要publicPath的路径与tomcat的域名保持一致。

2、报错如下：

无法识别Vue，网上搜了之后发现production中有一个配置如下：

config.set('externals',{})，在发布模式配置externals节点，让这些文件不要打包,直接用CDN（CDN要同步引入index.html），为了节省打包体积，Vue等组件都是通过CDN获取，

所以需要在index.html中增加这些依赖的地址：

可以直接放到vue项目public文件夹的index.html，这样每次build之后就会有了，

<link rel=stylesheet href=https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css> 
    <link rel=stylesheet href=https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css> 
    <link rel=stylesheet href=https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css> 
    <link rel=stylesheet href=https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css> 
    <link rel=stylesheet href=https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css> 
    <script src=https://cdn.staticfile.org/vue/2.5.22/vue.min.js> </script> 
    <script src=https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js> </script> 
    <script src=https://cdn.staticfile.org/axios/0.18.0/axios.min.js> </script> 
    <script src=https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js> </script> 
    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/series-label.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/oldie.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script src=https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js> </script> 
    <script src=https://cdn.staticfile.org/quill/1.3.4/quill.min.js> </script> 
    <script src=https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js> </script> 
    <script src=https://cdn.staticfile.org/element-ui/2.8.2/index.js> </script>

3、跨域的问题，vue项目与server端代码同时运行，分别运行在8080和8081端口上，这样前端访问后端代码时就会出现跨域的问题，如下：

http://localhost:8081from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

解决：在development模式时设置代理，在vue.config.js文件中加入如下代码：

devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: "localhost",
        port: 8080,
        https: false,
        hotOnly: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8080/', //API服务器的地址
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': ''
                }
            }
        },
    },

在main-dev.js配置文件中将URL设置为：axios.defaults.baseURL = 'api'，即可解决前后端同时启动时前端应用调后端应用了。