Vue项目问题记录

Vue项目问题记录

Vue

1.资源引入报错：Uncaught SyntaxError: Unexpected token < 参考博客

assets文件夹与static文件夹

• assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了
• assets中的文件在vue中的template/style下用…/这种相对路径的形式进行引用，在script下必须用@import的方式引入而static下的文件在.vue中的任何地方都只要使用…/这种相对路径的方式引入
• assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放在assets中。
• static用来放没有npm包的第三方插件，字体文件。
• assets与components同级 components下的.vue引用静态文件时，相对路径为 …/assets/wapFront
• src目录下的资源只能import或require。
• 想静态引入的话，建立一个与src同级的目录例如static，然后把静态资源放入该文件夹下，html的引入路径如下：./static/…（注：一定要放在static文件夹下，否则报错）

2.解决vuex在页面刷新后数据丢失的问题

• 使用sessionStorage，localStorage进行备份还原，参考博客

3.vue 带参数跳转打开新窗口 $router.resolve 参数不在url中

// 1.如果参数在路径中：
router.js
    path: '/project/:id'

var {
      href } = this.$router.resolve({
     
    path: '/project',
    query: {
     
        id: this.id
    }
});
window.open(href);
// 获取参数：this.$route.query.id

// 2.如果参数不在路径中：
// 2.1.不打开新窗口：
     path: '/projectlist' , name: '项目列表'        

    var href = this.$router.push({
     
    name: '项目列表',
    params: {
     
       msg : this.msg
    }
});
// 获取参数：this.$route.params.msg

// 2.2.打开新窗口：
var {
      href } = this.$router.resolve({
     
    name: '项目列表',
});
localStorage.setItem("msg", this.msg)
window.open(href);
// 获取参数：
if (localStorage.getItem('msg')){
     
      this.m= localStorage.getItem('msg');
      localStorage.clear();
};

4.vue中axios 兼容IE浏览器

在项目开发过程中用到了axios来获取数据，但在IE中报错：proimse未定义。这是因为axios本质上是封装了ES6语法的promise,而promise在IE上并不兼容。 解决办法：安装babel-polyfill

// 1.安装：npm i --save-dev babel-polyfill
// 2.在main.js中   import 'babel-polyfill'
// 3.在build/vue-loader.conf.js中：
module.exports = {
     
  entry: {
      app: ['babel-polyfill', './src/main.js'] },
  ......
}

最新版本的项目，没有webpack.config.js文件，如何配置babel-polyfill？参考issue

5.history模式下刷新页面404
解决方法：配置nignx将错误重定向到index.html

location / {
  try_files $uri $uri/ /index.html;
}

6.在history模式下存在多级路由时，页面路由跳转是ok的，但当二级以上路由时，浏览器直接刷新页面会空白

• 老的vue项目，找到publicPath:"“改成publicPath:”/"
• 最新的vue脚手架搭建的，在项目中找到这个文件node_modules/@vue/cli-service/lib/options.js，然后把里面的baseUrl:"“改成baseUrl:”/"就可以了

参考博客

element ui

1.表格前面的选择框后面如果有三个点，增大该列的宽度即可

2.el-radio-group回显问题，form.status的前后端数据类型要一致v-model和:label的类型要一致。假设form.status是整数，:label绑定的也必须是整数。参考博客1，博客2

<el-radio-group v-model="form.status">
 <el-radio
   v-for="item in statusOptions"
   :key="item.value"
   :label="parseInt(item.dictValue)"
 >{
    {item.label}}el-radio>
el-radio-group>

SCSS

• 安装scss

npm install sass-loader --save-dev
npm install node-sass --sava-dev

• 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
     
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}