vscode搭建vue项目及开发、打包发布时遇到的问题
2022-06-23 09:17阅读：
搭建一：http://blog.sina.cn/dpool/blog/s/blog_13f8261eb010307fo.html?vt=4
搭建成功后，按需求进行插件安装
1、比如我管理后台用 elementui
npm i element-ui -S
然后在main.js中引入
import ElementUI from
'element-ui';
import
'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import { Button, Select }
from 'element-ui';
Vue.use(Button)
Vue.use(Select)
2、公共代码js
以下为：public.js 代码
const http =
'http://x.x.x.x:8500'
;//接口地址ip
// 创建uuid
const uuid =
function ()
{
return
'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.
replace(
/[xy]/g,
function (
c) {
var r =
Math.
random() *
16 |
0,
v =
c ==
'x' ?
r :
(
r &
0x3 |
0x8);
return
v.
toString(
16);
});
}
// 获取当前日期时间
const nowTime =
function ()
{
var date =
new Date(),
year =
date.
getFullYear(),
month =
date.
getMonth() +
1,
day =
date.
getDate(),
hour =
date.
getHours() <
10 ?
'0' +
date.
getHours() :
date.
getHours(),
minute =
date.
getMinutes() <
10 ?
'0' +
date.
getMinutes() :
date.
getMinutes(),
second =
date.
getSeconds() <
10 ?
'0' +
date.
getSeconds() :
date.
getSeconds();
month >=
1 &&
month <=
9 ? (
month =
'0' +
month) :
'';
day >=
0 &&
day <=
9 ? (
day =
'0' +
day) :
'';
var timer =
year +
'-' +
month +
'-' +
day +
' ' +
hour +
':' +
minute +
':' +
second;
return timer;
};
//以上创建的方法都要在这里进行注册
export default {
http,
uuid,
nowTime,
open
}
在main.js中引入
// 注册public公共js start
import Public from
'./utils/public'
Vue.
prototype.
Public =
Public;
// 注册public公共js end
在页面中使用，举例：
this.
Public.
uuid()
//使用方法
that.
Public.
http
//使用变量
3、axios请求
安装：cnpm install axios
--save
在main.js中引入
import axios from
'axios'
Vue.
prototype.
$http =
axios
在页面中使用
that.
$http.
post(
that.
Public.
http+
'接口地址',
{
'Data': [
obj]
}).
then(
function (
res)
{
if(
res.
data.
isSuccess){
that.
$message({
message: '修改成功',
type: 'success'
});
}
else{
that.
$message.
error(
res.
data.
resultMessage);
};
})
如果上线后，项目和服务放在同一目录先不会出现跨域，出现线上跨域只能是后台来配置请求头
但如果想在本地跨域调试，可以在webpack配置一下proxyTable就OK了，如下
config/index.js
npm install vux --save
在main.js中引入
import {
Actionsheet }
from
'vux'
Vue.
component(
'actionsheet',
Actionsheet)
//
以下为需要用到的vux的控件注册，用到什么就注册什么，比如我用到了popup和xheader、toast
//具体到官方文档里去找即可
import {
ToastPlugin }
from
'vux'
Vue.
use(
ToastPlugin)
import {
PopupPicker,
XHeader
}
from 'vux'
Vue.
component(
'popup-picker',
PopupPicker)
Vue.
component(
'x-header',
XHeader);
5、如果写法明明一样可是一直报错
错误提示：You may user special comments to disable some
warnings
找到build/webpack.base.conf.js文件，注释或者删除掉：module->rules中有关eslint的规则
module: {
rules:
[
// ...(config.dev.useEslint ?
[createLintingRule()] : []),
// 注释或删除
]
}
注意：注释完成后一定要重新运行才会生效！！！！
6、如果打包后变成空白页
找到 config下的index.js中
build中的assetsPublicPath
由 '/' 改为 './'
注意，assetsPublicPath有两个，一个在dev中一个在build中
build: {
// Template for
index.html
index:
path.resolve(__dirname,
'../dist/index.html'),
//
Paths
assetsRoot:
path.resolve(__dirname,
'../dist'),
assetsSubDirectory:
'static',
assetsPublicPath:
'./',
7、打包后css背景图不显示
打包后放到服务器上运行会发现背景图片无法显示了，这其实和webpack打包有关
在
build/util.js中配置
publicPath：“../../”即可
// (which is the case during production build)
if (options.extract) {
return
ExtractTextPlugin.extract({
use: loaders,
