一. 原以为升级 vue-cli3 的路线是这样的:
创建 vue-cli3 项目, 按原有项目的配置选好各项配置
迁移目录
- src->src
- static->public
对比新旧 package.JSON, 然后 yarn install, 完毕.
然鹅... 运行项目, 报错
- You are using the runtime-only build of Vue......
- :
然后去查了下旧项目的相关字眼文件:
噢, 原来是 vue-cli3 的 webpack 相关文件都得自己写. 于是乎根据官网的指引, 在根目录创建了 vue.config.JS
此时粗略配置:
- chainWebpack: config => {
- config.module
- .rule('vue')
- .use('vue-loader')
- .loader('vue-loader')
- .tap(options => {
- options.compilerOptions.preserveWhitespace = false
- return options
- })
- config.resolve.alias
- .set('vue$', 'vue/dist/vue.esm.js')
- .set('@', resolve('src'))
- }
二. 此时勉强能跑起来, 但后续遇到了这些坑:
- #1 public 静态资源不加载
- ```
- const CopyWebpackPlugin = require('copy-webpack-plugin')
- // ....
- // 确保静态资源
- config.resolve.extensions = ['.js', '.vue', '.json', '.CSS']
- config.plugins.push(
- new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
- )
- ```
#2 Chrome 查看样式时无法找到源文件
原因: vue-cli3 里默认关闭 sourceMap, 样式都会被打包到首页. 解决: 需要自己配置打开
- // 让样式找到源
- CSS: {
- sourceMap: true
- },
- #3 生产环境的 debuger 和 console 无法通过
- uglifyjs-webpack-plugin
和 uglify-es 剔除
原因: 不支持 es6, 需要配置 babel(uglify-es 按配置填会显示不存在选项)
解决: 插件 https://github.com/terser-js/terser#output-options
- ```
- const TerserPlugin = require('terser-webpack-plugin')
- if (process.env.NODE_ENV === 'production') {
- // 为生产环境修改配置...
- new TerserPlugin({
- cache: true,
- parallel: true,
- sourceMap: true, // Must be set to true if using source-maps in production
- terserOptions: {
- compress: {
- drop_console: true,
- drop_debugger: true
- }
- }
- })
- } else {
- // 为开发环境修改配置...
- }
- ```
#4 无法在 config 目录下配置不同环境的 API_URL, 用于跨域请求
原因: vue-cli3 中需要遵循变量规则, 使用 VUE_APP 前缀
官方规则: 在客户端侧代码中使用环境变量
解决: 于是你需要创建如下几个文件:
.local 也可以加在指定模式的环境文件上, 比如 .env.development.local 将会在 development 模式下被载入, 且被 Git 忽略.
文件内容:
- // env.development.local
- NODE_ENV = development
- VUE_APP_URL = http://xxx.x.xxx/
- #5 vue-cli 代理转发控制台反复打印
- "WebSocket connection to'ws://localhost..."
解决方法:
vue.config.JS 中配置 devServer.proxy 的 ws 为 false
结合上述两步, 相对应的 vue.config.JS, 需要这么写:
- const env = process.env.NODE_ENV
- let target = process.env.VUE_APP_URL
- const devProxy = ['/api', '/'] // 代理
- // 生成代理配置对象
- let proxyObj = {};
- devProxy.forEach((value, index) => {
- proxyObj[value] = {
- ws: false,
- target: target,
- // 开启代理: 在本地会创建一个虚拟服务端, 然后发送请求的数据, 并同时接收请求的数据, 这样服务端和服务端进行数据的交互就不会有跨域问题
- changeOrigin: true,
- pathRewrite: {
- [`^${value}`]: value
- }
- };
- })
- // ....
- devServer: {
- open: true,
- host: 'localhost',
- port: 8080,
- proxy: proxyObj
- }
最后贴上我的 vue.config.JS:
- const CopyWebpackPlugin = require('copy-webpack-plugin')
- const TerserPlugin = require('terser-webpack-plugin')
- const path = require('path')
- const env = process.env.NODE_ENV
- let target = process.env.VUE_APP_URL
- const devProxy = ['/api', '/'] // 代理
- // 生成代理配置对象
- let proxyObj = {};
- devProxy.forEach((value, index) => {
- proxyObj[value] = {
- ws: false,
- target: target,
- // 开启代理: 在本地会创建一个虚拟服务端, 然后发送请求的数据, 并同时接收请求的数据, 这样服务端和服务端进行数据的交互就不会有跨域问题
- changeOrigin: true,
- pathRewrite: {
- [`^${value}`]: value
- }
- };
- })
- function resolve (dir) {
- return path.join(__dirname, dir)
- }
- module.exports = {
- publicPath: '/',
- // 让样式找到源
- CSS: {
- sourceMap: true
- },
- configureWebpack: config => {
- // 确保静态资源
- config.resolve.extensions = ['.js', '.vue', '.json', '.css']
- config.plugins.push(
- new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
- )
- if (process.env.NODE_ENV === 'production') {
- // 为生产环境修改配置...
- new TerserPlugin({
- cache: true,
- parallel: true,
- sourceMap: true, // Must be set to true if using source-maps in production
- terserOptions: {
- compress: {
- drop_console: true,
- drop_debugger: true
- }
- }
- })
- } else {
- // 为开发环境修改配置...
- }
- },
- chainWebpack: config => {
- config.module
- .rule('vue')
- .use('vue-loader')
- .loader('vue-loader')
- .tap(options => {
- options.compilerOptions.preserveWhitespace = false
- return options
- })
- config.resolve.alias
- .set('vue$', 'vue/dist/vue.esm.js')
- .set('@', resolve('src'))
- },
- devServer: {
- open: true,
- host: 'localhost',
- port: 8080,
- proxy: proxyObj
- }
- }
三. Eslint 相关报错及配置
- module.exports = {
- root: true,
- env: {
- node: true
- },
- 'extends': [
- 'plugin:vue/essential',
- '@vue/standard'
- ],
- rules: {
- 'generator-star-spacing': 'off',
- 'object-curly-spacing': 'off',
- // 最常出现的错误
- 'no-unused-vars': 'off',
- // 最常出现的错误
- "vue/no-use-v-if-with-v-for": ["error", {
- "allowUsingIterationVar": true
- }],
- 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
- 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
- },
- parserOptions: {
- parser: 'babel-eslint'
- }
- }
最后的最后, 跑个项目
yarn serve
yarn build
来源: https://juejin.im/post/5c4a83e36fb9a049b13e91ba