vue2.9.1-vue-cli几个配置

最新推荐文章于 2024-06-24 14:59:32 发布

xuanwuziyou

最新推荐文章于 2024-06-24 14:59:32 发布

阅读量798

点赞数

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/78795787

版权

安装vue-cli:
 cnpm install vue-cli
用vue-cli初始化一个vue项目：
 vue init webpack demoProject
 (安装router,其它先都不要)

进入demoProject，安装项目依赖:
 cnpm install

安装vuex:
 cnpm install vuex --save

开发中运行项目：
 npm run dev

项目运行端口号配置修改：
 config文件夹 -> index.js文件

打包命令，打包到文件夹dist：
 npm run build

打包后如果页面找不到资源，查看修改此处config->index.js：

  build: {
   assetsPublicPath: './', //'/', edit by XXX 20171213 19:35


配置less:
 cnpm install less less-loader --save  //必须是--save
 npm install --production              //用于生产上可以安装
修改文件：build -> webpack.base.conf.js:
 module: {
     rules: [
       {
         test: /\.less$/,
         loader: 'style!css!less',
       },


注意：static文件夹里的东西是不经过编译的，直接打包进dist里的资源。     发布时，把dist文件夹里的内容全部上传到服务器即可。入口文件: main.js开发过程中配置打包的js和css文件不加版本号： build->webpack.prod.conf.js中：25-28行 44-45行：

  output: {
    path: config.build.assetsRoot,
    //filename: utils.assetsPath('js/[name].[chunkhash].js'),
    //chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    filename: utils.assetsPath('js/[name].js'),
    chunkFilename: utils.assetsPath('js/[id].js')
  },
注意：打包之前把main.js中的axios的baseURL去掉！！！仅限开发中使用。设置打包后的项目是否允许使用浏览器的vue插件：  config文件夹->prod.env.js：  'use strict'  module.exports = {    NODE_ENV: '"development"'//'"production"' edit by Wss 20171212 14:12  }