vue3的配置和踩坑（安装、配置vue-router、px转rem、热更新、less、axios）
一：安装
1.vue create 工程名（注vue3： build没了、config没了，3.0的安装项目时自动下载node-model。）
2.在根目录下创建一个vue.config.js
function getIPAdress(){
var interfaces = require('os').networkInterfaces();
for(var devName in interfaces){
var iface = interfaces[devName];
for(var i=0;i<iface.length;i++){
var alias = iface[i];
if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
return alias.address;
}
}
}
}
module.exports = {
// baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
publicPath:'./',//vue-cli3.3+新版本使用
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'static',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
//生产环境是否生成 sourceMap 文件，一般情况不建议打开
productionSourceMap: false,
css:{
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps，一般不建议开启
sourceMap: false,
},
devServer: {
port: 1818, // 端口号
host: getIPAdress(),
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
compress: true,//配置热更新
proxy: {
'/api': {
target: 'http://image.hn8718.com:8777', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': ''
}
}
},//跨域
},
}
或者：
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/', // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist' // outputDir: 'dist', // pages:{ type:Object,Default:undfind } devServer: { port: 8888, // 端口号 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } }, // 配置多个代理 }}二、配置vue-router
cnpm install vue-router --save
1.在src增加router文件加入js
2.进行路由配置（图+代码）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Routes = [
{ path: '*', redirect: '/welcome' },
{
path: '/welcome',
name: '欢迎页面',
component:() => import('@/views/demo/pages/welcome')
},
{
path: '/page1',
name: 'page1',
component: () => import('@/views/demo/pages/page1')
},
]
const createRouter = () => new Router({
routes: Routes
})
const router = createRouter()
export default router；
3.在main.js中引入
4.修改app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center;
color: #2c3e50;
margin-top: 60px; */
}
</style>
三、px转rem
1.cnpm install
postcss-px2rem2.在public中添加rem.js
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}
3.在vue.config.js中添加（图加代码）
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 32 //基准大小 baseSize，需要和rem.js中相同
})
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}4.在main.js中添加
;(function(){
var rem = document.createElement('script');
rem.src = './rem.js';
document.body.appendChild(rem)
})()
四、热更新
五、配置less
1.cnpm install less less-loader --save-dev
六、配置axios
1.cnpm install axios --save
2.为了解决跨域问题，我配置了withCredential。
import axios from 'axios'
import {Message} from 'element-ui'
axios.defaults.withCredentials=true; //请求携带cookie
var baseURL='http://192.168.0.169:8080/api';//王帅
const instance = axios.create({
baseURL
})
instance.interceptors.response.use(response => {
if(response.data.code==401){
// toLogin();
return;
}
return response;
})
export let myAxiosGet = (url, params)=>{
return new Promise((resolve, reject) => {
instance.get(url, {params,withCredentials:true}).then(function (response) {
resolve(response.data)
if(!response.data.success){
Message({
message: response.data.message,
type: 'error'
});
}
})
.catch(function (err) {
Message({
message: '获取信息失败',
type: 'error'
});
reject(err);
})
})
}
export let myAxios = (method,url, params)=>{
return new Promise((resolve, reject) => {
instance({
method: method,
url,
data: params,
},{
withCredentials:true
})
.then(function (response) {
resolve(response.data);
if(!response.data.success){
Message({
message: response.data.message,
type: 'error'
});
}
})
.catch(function (err) {
Message({
message: '获取信息失败',
type: 'error'
});
reject(err);
});
})
}
