vue cli3项目打包以及上线，调试/页面刷新会报错-Uncaught SyntaxError: Unexpected token ‘＜‘/

vue cli3的构建以及proxy代理方法和cli2 有所不同，版本2配置代理会在config文件夹的index.js文件中配置，如下

'use strict'
const path = require('path')
module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://11.11.92.27:8099/',//实际你要用的接口
        secure: false,  // 是否验证SSL证书，http请求时配置
        changeOrigin: true,
        // timeout: 1800000,
        // ws: false, //是否代理websocket
        pathRewrith: {
          '^/api': '/api'
        }
      },
    },
    host: 'localhost', 
    port: 3000
  },
  build: {
    devEnv: require('./dev.env'),
    productionEnv: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/'
    productionSourceMap: false,
    devtool: '#source-map',
  }
}

然而版本3 的proxy配置，在vue.config.js中配置。

module.exports = {
	/* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
	// publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/',//会报错 --Failed to load resource: net::ERR_FILE_NOT_FOUND 路径找不到
	publicPath: process.env.NODE_ENV === 'production' ? './' : '/',//不报错  但是页面是空的，这是history情况下会出现的问题，换成hash模式就不会出现这样的问题。
	/* 输出文件目录：在npm run build时，生成文件的目录名称 */
	outputDir: 'dist',
	/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
	assetsDir: "assets",
	/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
	productionSourceMap: false,
	/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
	filenameHashing: false,
	/* 代码保存时进行eslint检测 */
	// lintOnSave: true,
	/* webpack-dev-server 相关配置 */
	devServer: {
		open: true,/* 自动打开浏览器 */
		host: '0.0.0.0',/* 设置为0.0.0.0则所有的地址均能访问 */
		port: 8000,
		https: false,
		hotOnly: false,
		proxy: {/* 使用代理 */
			'/api': {
				target: "http://11.11.92.27:8099/",//实际你要用的url接口
				secure: false, 
				changeOrigin: true,
				pathRewrith: {
					'^/api': '/api'
				}
			}
		},
	},
}

这就是在vscode中配置项目的配置，项目写的差不多的。那就该测试，然后上线了，那就需要打包，会在项目生成dist文件夹，我的项目目录如下：

将index.html右键在浏览器打开，可以看到初始登录页面，证明打包可以啦。但是请求路径会报错，其实就是请求的路径代理出了问题，接下来解决这个问题。

我们可以将dist文件可以部署到 express 服务器上运行，来测试我们的项目。

1. 安装express-generator生成器
   npm install express-generator -g 进行安装

2. 创建一个express项目
   express expressDemo （expressDemo是项目名，可以自定义）

3. 进入expressDemo目录，并安装项目依赖
   cd expressDemo
   npm install

4. 将dist目录下的所有文件复制到express项目的public文件夹下

5. 然后执行npm start ，启动项目。在浏览器 http://localhost:3000就可以看到你的项目了。

6. 但是我这还有问题，因为我用的url接口是代理请求的，所以还需要在app.js来配置代理。

下面介绍express的代理，
首先执行npm install express-generator -g ，

//然后在app.js
var proxy   = require('express-http-proxy')
var app = express();
// 配置代理 /
// 访问 http://localhost:3000/会转为  http://11.11.92.27:8099/ 请求
app.use('/', proxy('http://11.11.92.27:8099/', {
  filter: function(req, res) {
     return req.url.indexOf('/api/') == 0;
  },
  forwardPath: function(req, res) {
    return require('url').parse(req.url).path;
  }
}));

这样就ok了，这些都是基于hash模式进行的, 测试的时候退出的登录的时候会有跳转
window.location.href = '/login’会报错。 并且在history模式打包的dist文件夹下的index.html在浏览器打开是个空页面。但是不影响在express上部署。

当然还有其他小问题，如下。

1.打包项目，查看效果样式

yarn bulid 生成dist文件夹，
打包后 cmd cd 进入 该文件夹 运行 服务就可以了运行调试了。
$ cd dist
$ npx serve -d
然后访问 lochost:5000 就可以了

2页面刷新会报错-Uncaught SyntaxError: Unexpected token ‘<’/-----history

在vue.config.js文件中，将原来的 publicPath: ‘./’，改成 publicPath: ‘/’。
在这说明一下，在vue-cli3中配置代理在vue.config.js，在2版本中在bulid-vue 和 config文件夹下配置代理，我在3版本中在config中配置代理不起作用。