Upgrade steps


1.
Delete the original VUE-CLI and install vue-CLI3.0


2. Delete the contents under SRC in the new project and overwrite the SRC directory in the original project into the new project


3, change router from directory folder to file, SRC /router/index.js upgrade one layer to SRC /router.js


4,
In my project, SRC has been divided into views and components, so there is no need to modify it. If it is not this structure, I need to distinguish it by myself


5. Overwrite the index.html and favicon.ico of the original project into the public of the new project


6,
Copy the static folder of the original project into the public of the new project


7,
Modify the package.json file to be the same as the original project


Eight,
Create and configure the vue.config.js file

Delete command:

npm uninstall vue-cli -gCopy the code

Install @vue/cli command:

npm install -g @vue/cliCopy the code

I have omitted the installation process here, there have been many articles on nuggets, and here are some of the problems encountered:

1. Vue file cannot be found

Error in CMD

These dependencies were not found:
* @/views/index/index in ./src/router.js
* @/views/index/otherIndex in ./src/router.js
To install them, you can run: npm install --save @/views/index/index @/views/index/other
Copy the code

An error was reported on the page

./src/router.js
Module not found:
Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'
Copy the code

This error indicates that the file is not found because the “@” (alias) is set in the original project. It is possible that the extensions are set in the original project.

const path = require('path'); The top / / vue. Config. Js
const resolve = (dir) = > path.join(__dirname, dir);
module.exports = {
  configureWebpack: config= > {
    Object.assign(config, {
      resolve: {
        extensions: ['.js'.'.vue'.'.json'].// You can omit the suffix
        alias: { // aliases, which can be used to shorten the path length when require
          The '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components')}}}); }}Copy the code

2. No image was found

Module not found:
Error: Can't resolve '. /.. /.. /static/image/avatar_gray.jpg' in 'D:\VUE\haigui-proxy\src\views\index'Copy the code

Static SRC and static SRC are copied to the new project and the static path is not correct. The static path of vue-CLI3.0 is copied to the public of the new project.

Any static resources placed in the public folder are simply copied without going through webpack. You need to refer to them via an absolute path.

For example, if the directory is public/static/image, image contains various images:

Image logo.png:

<img src="/static/image/logo.png" > Copy the code

Set the background image in the CSS:

.bg {
  background: url('/satic/image/bg.jpg');
}
Copy the code

Note:

The public directory provides a contingency, and when you reference it through the absolute path, be aware of where your application will be deployed. If your application is not deployed at the root of the domain, you need to prefix your URLS with publicPath.

When to use the public folder

  • You need to specify a file name in the build output.
  • You have thousands of images and need to dynamically reference their paths.
  • Some libraries may not be compatible with WebPack, so you have no choice but to introduce them as a separate label.

Processing benefits through WebPack:

  • Scripts and stylesheets are compressed and packaged together to avoid additional network requests.
  • Missing files report errors directly at compile time, rather than on the client.
  • The resulting file names contain content hashes, so you don’t have to worry about browsers caching older versions of them.
  • The public directory provides a contingency, and when you reference it through the absolute path, be aware of where your application will be deployed.

The Assets folder is used to hold webpack processed resources

Need to use relative path import:

<! -->
<img src=".. /assets/images/logo-black.png">
Copy the code

Img dynamic path:

<img :src="imgurl">data () { return { imgurl: require(".. /assets/images/gou.png") } }Copy the code

CSS background:

.login-wrapper {
  background: url('.. /.. /assets/images/bg.jpg');
}
Copy the code

Reference: Official explanation

3. Configuration of SCSS global variables

Module build failed (from./node_modules/sass-loader/lib/loader.js): Undefined variable. 955 │ border-right: 1px solid$borderColor;
                            ^^^^^^^^^^^^
root stylesheet in D:\VUE\haigui-proxy\src\views\index\index.vue (line 955, column 33)
Copy the code

If SCSS is used in the original project and global variables are used, you need to reconfigure them in vue.config.js and put the global variables file in the SRC /assets/ CSS directory.

This was done in build/utils.js in the original project

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader'.options: {
      resources: path.resolve(__dirname, '.. /src/assets/css/haigui-variable.scss')}})Copy the code

In the new project, it is much simpler. Just edit vue.config.js and add a section:

css: {
  loaderOptions: {
    sass: {
      // @/ is an alias for SRC /
      data: '@import "~@/assets/css/haigui-variable"; '
      // You can write this if no alias is set
      // data: '@import "./src/assets/css/haigui-variable"; '}}}Copy the code

4, the runtime – only

You are using the runtime-only build of Vue where the template compiler is not
available. Either pre-compile the templates into render functions, or use the
compiler-included build.Copy the code

Reason: there are two forms of vue code compiler (template) model and the runtime (runtime), the vue module package. The default to the main field of json runtime pattern, pointing to the position “dist/vue.runtime.com mon. Js”.

Thank you LeonWuV for sharing

This has been a feature of Vue since it was upgraded to 2.0.

In the main.js file, the vue initialization is written in compiler mode, so the above error message appears.

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});
Copy the code

Solutions:

Method 1: Modify the main.js code as follows

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

We’re not done here, so why was it ok before, when the previous VUE version was also 2.x?

This is also the second solution: we had individual name configurations in our WebPack configuration file, as follows

resolve: {
  alias: {
      'vue$': 'vue/dist/vue.esm.js' // The internal end of the regular expression vue}}Copy the code

That is, the line import Vue from ‘Vue’ is resolved to import Vue from ‘Vue /dist/vue.esm.js’, specifying the location of the file directly, without using the default file location of the main field.

So the second solution is to add the following webpack configuration to the vue.config.js file,

configureWebpack: {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'}}}Copy the code

The third solution comes to mind here, which is to simply write the following when referencing vue

import Vue from 'vue/dist/vue.esm.js'Copy the code