Правильная позиция для обновления vue-cli3 в проекте "Vue Practice"

Vue.js
Правильная позиция для обновления vue-cli3 в проекте "Vue Practice"

1. Я думал, что путь обновления vue-cli3 следующий:

  • Создайте проект vue-cli3 и выберите различные конфигурации в соответствии с конфигурацией исходного проекта.
    选好各项配置
  • Каталог миграции
src->src
static->public
  • Сравнить старый и новыйpackage.json,Потомyarn install,полный.

Но гусь... запусти проект и сообщи об ошибкеYou are using the runtime-only build of Vue......:

报错

Затем я проверил соответствующие текстовые файлы старого проекта:

О, оказывается, что файлы vue-cli3, связанные с веб-пакетом, должны быть написаны вами. Итак, в соответствии с рекомендациями официального сайта, я создал его в корневом каталоге.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'))
  }

2. В это время я еле бегаю, но я столкнулся с этими ямами позже:

#1общедоступные статические ресурсы не загружаются

```
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 // ....
 // 确保静态资源
 config.resolve.extensions = ['.js', '.vue', '.json', '.css']
 config.plugins.push(
  new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
)
```

#2Chrome не может найти исходный файл при просмотре стилей

причина: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
  }
}

3. Ошибки и конфигурация, связанные с 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

Сборник авторских статей

Категории