vue项目查看vue版本及cli版本的实现方式

./src/router.js
Module not found:
Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'
这种报错是说明文件路径错误没有找到文件，因为在原项目中设置了“@”也就是alias(别名)，也有可能在原项目中设置了extensions(可以省略扩展名)，所以需要在新项目的vue.config.js中设置如下内容：
const path = require('path'); // vue.config.js顶部
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
 configureWebpack: config => {
 Object.assign(config, {
  resolve: {
  extensions: ['.js', '.vue', '.json'], // 可以省略后缀名
  alias: { // 别名,在require的时候，可以使用这些别名，来缩短路径的长度
   '@': path.resolve(__dirname, './src'),
   '@c': path.resolve(__dirname, './src/components')
  }
  }
 });
 }
}

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

<img :src="/UploadFiles/2021-04-02/imgurl">

css 背景图：


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


参考：官方解释
3、scss全局变量的配置


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)



若原项目中使用了scss并且使用了全局变量，需要在vue.config.js中重新配置，并把全局变量文件放到src/assets/css目录下。
在原项目中需要在build/utils.js中进行配置


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


新项目中就简单的多，直接编辑vue.config.js，加入一节内容即可：


css: {
 loaderOptions: {
 sass: {
  // @/ 是 src/ 的别名 ~是必须有要加的
  data: '@import "~@/assets/css/haigui-variable";'
  // 如果没有设置别名可以这么写
  // data: '@import "./src/assets/css/haigui-variable";'
 }
 }
}


4、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.

原因：
vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。
这是vue升级到2.0之后就有的特点。
而在main.js文件中，初始化vue却是这么写的，这种形式为compiler模式的，所以就会出现上面的错误信息。


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


解决办法：
方法一：
将main.js中的代码修改如下就可以


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


到这里我们的问题还没完，那为什么之前是没问题的，之前vue版本也是2.x的呀？
这也是第二种解决办法：
因为之前我们的webpack配置文件里有个别名配置，具体如下


resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
 }
}


也就是说，import Vue from ‘vue' 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js'，直接指定了文件的位置，没有使用main字段默认的文件位置。
所以第二种解决方法就是，在vue.config.js文件里加上webpack的如下配置即可，


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


既然到了这里就会想到第三中解决方法，那就是在引用vue时，直接写成如下即可

import Vue from 'vue/dist/vue.esm.js'

以上这篇vue项目查看vue版本及cli版本的实现方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。