详解项目升级到vue-cli3的正确姿势

网络编程 2024/11/19 佚名

3 2 1

小李飞刀资源网 Design By www.iooab.com

一. 原以为升级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 按配置填会显示不存在选项)

解决：插件terser

```
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' "text-align: center">
yarn build


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue-cli3项目升级,vue-cli3升级

标签：

vue-cli3项目升级,vue-cli3升级

小李飞刀资源网 Design By www.iooab.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

小李飞刀资源网 Design By www.iooab.com

评论“详解项目升级到vue-cli3的正确姿势”

暂无评论...

www.iooab.com 小李飞刀资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

详解项目升级到vue-cli3的正确姿势

vue-cli3项目升级,vue-cli3升级

jQuery实现的网站banner图片无缝轮播效果完整实例

jQuery实现合并表格单元格中相同行操作示例

评论“详解项目升级到vue-cli3的正确姿势”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接